<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表设计</title>
    <link rel="stylesheet" href="/static/component/pear/css/pear.css"/>
    <link rel="stylesheet" href="/static/component/pear/css/module/design.css"/>
    <script src="/static/component/layui/layui.js"></script>
    <script src="/static/component/pear/pear.js"></script>
    <script src="/static/component/pear/module/ruinuo/sortable.js"></script>
    <script src="/static/component/pear/module/ruinuo/xm-select.js"></script>
    <script src="/static/component/pear/module/ruinuo/code.js"></script>
</head>
<body>
<style>
    .design_head {
        width: 100%;
        height: 50px;
        overflow: hidden;
        line-height: 50px;
        border-bottom: 1px solid #eee
    }

    .design_head .title {
        font-size: 16px;
        font-weight: 500;
        padding: 12px 18px;
    }

    .design_head .menu {
        text-align: center
    }

    .design_head .menu li {
        text-align: center;
        position: relative;
        cursor: pointer;
        font-size: 14px;
        line-height: 50px;
        padding-left: 15px;
        padding-right: 15px;
        transition-duration: .25s, 1s;
    }

    .design_head .menu li.on, .design_head .menu li:hover {
        background: var(--theme_color);
        color: #fff;

    }

    .design_head .menu li i {
        padding-right: 5px;
        font-size: 20px;
    }

    .nodata {
        margin: auto;
        margin-top: 50px;
        text-align: center;
        line-height: 30px;
        cursor: pointer;
        margin-bottom: 50px;
    }

    .nodata i {
        display: block;
        font-size: 40px !important;
        padding-bottom: 15px;
    }

    .iframe_con iframe {
        border: 0;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 90vh;
    }

    .design_table_elem {
        padding: 10px;
    }

    .label_con {
        background: #f5f5f5;
        padding: 10px
    }

    .item-img {
        height: 115px;
        background: #ebeef5;
        border-radius: 4px;
        overflow: hidden;
        cursor: pointer;
        position: relative;
        border: 1px solid #ebeef5;
        font-size: 12px

    }

    .item-img img {
        height: 90px;
    }

    .design_height .layui-form-label {
        font-weight: bold;
        padding-top: 10px !important;
    }
    .ruinuo_box .layui-form-label {
        font-weight: bold;
    }
    .form_label .layui-form-label{
        background-color: #f5f7fa;
        color: #000;
        text-align: center;
        width: 110px;
    }
    .form_label .layui-input, .form_label .layui-select, .form_label .layui-textarea, .form_label xm-select{
        border-radius: 0px!important;
    }
    .style_con{
        display: none;
    }
    .card_table_con{

        margin-top: 10px;
        height: inherit;
    }
</style>


<div class="view_body"></div>
<script type="text/html" id="view_body_data">
    <div class="design_head display_flex">
        <div class="flex_1 title">列表设计器</div>
        <div class=" display_flex menu">
            <li class="on display_flex">
                <i class="ruinuo-icon icon-biaodan"></i>列表
            </li>
            <li class="display_flex" onclick="layui.design_table.SaveSubmit(2)">
                <i class="ruinuo-icon icon-browse"></i>预览
            </li>
            <li class="display_flex" onclick="layui.design_table.SaveSubmit(1)">
                <i class="ruinuo-icon icon-check-item"></i>保存
            </li>
            <li onclick="FileCode()" class="display_flex">
                <i class="ruinuo-icon icon-ccaozuo"></i>生成
            </li>
            <li onclick="layui.public.DrawerTpl('.mode_list','300px','模块类别')" class="display_flex">
                <i class="ruinuo-icon icon-menu"></i>模块
            </li>
        </div>
        <div class="flex_1">
        </div>
    </div>
    <div class="design-con">
        {{# if(d.mode_id){ }}
        <section class="design-left">
            <div class="design-title">列表配置</div>
            <div class="design_height">

                <div style="padding: 10px;padding-top: 0px">
                    <div class="layui-form form_top design-right-con">
                        <div class="design-box layui-col-xs12 layui-col-md12">
                            <label class="layui-form-label">风格设置</label>
                            <div class="layui-input-block " data_tag="select" data_source="lists_style">
                                <select name="style" lay-filter="d_select_filter" lay-search=""><option value="">请选择</option>
                                    {{- layui.engine_form.SelectOption(d.source.lists_style.rows,d.detail.style)}}</select>
                            </div>
                        </div>
                        <div class="design-box layui-col-xs12 layui-col-md12" style="display: none">
                            <label class="layui-form-label">模板HTML</label>
                            <div class="layui-input-block">
                                <textarea name="style_tpl" type="textarea"
                                          placeholder="输入模板HTML"
                                          class="layui-textarea">{{= d.detail.style_tpl}}</textarea>
                            </div>
                        </div>

                        <div class="design-box layui-col-xs12 layui-col-md12 style_con card_table_con">




                        </div>

                        <div class="design-box layui-col-xs12 layui-col-md12 tree_con" style="display: none">
                            <label class="layui-form-label">树形字段</label>
                            <div class="layui-input-block">
                                <input name="tree_field" placeholder="请输入" class="layui-input" value="{{= d.detail.tree_field}}">
                            </div>
                        </div>
                        <div class="design-box layui-col-xs12 layui-col-md12 tree_con" style="display: none">
                            <label class="layui-form-label">树形名称</label>
                            <div class="layui-input-block">
                                <input name="tree_name" placeholder="请输入" class="layui-input" value="{{= d.detail.tree_name}}">
                            </div>
                        </div>

                        <div class="design-box layui-col-xs12 layui-col-md12">
                            <label class="layui-form-label">数据过滤</label>
                            <div class="layui-input-block">
                                <textarea name="set_where" type="textarea"
                                          placeholder="where语句，不懂的就不要乱填" lay-tag="textarea"
                                          class="layui-textarea" >{{= d.detail.set_where}}</textarea>
                            </div>
                        </div>

                        <div class="design-box layui-col-xs12 layui-col-md12">
                            <label class="layui-form-label">排序设置</label>
                            <div class="layui-input-block">
                                <input name="asc_desc" placeholder="请输入" class="layui-input" value="{{= d.detail.asc_desc}}">
                            </div>
                        </div>
                        <div class="design-box layui-col-xs12 layui-col-md12">
                            <label class="layui-form-label">分页设置</label>
                            <div class="layui-input-block " data_tag="select" data_source="page_num">
                                <select name="page_num" lay-filter="select_filter" lay-search=""><option value="">请选择</option>
                                    {{- layui.engine_form.SelectOption(d.source.page_num.rows,d.detail.page_num)}}</select>
                            </div>
                        </div>
                    </div>
                </div>

            </div>


        </section>


        <section class="design-center">

            <div class="layui-tab layui-tab-brief design-tab">
                <ul class="layui-tab-title">
                    <li onclick="layui.design_table.ChangeType(0)">字段属性</li>
                    <li onclick="layui.design_table.ChangeType(1)">显示按钮</li>
                    <li onclick="layui.design_table.ChangeType(2)">数据权限</li>
                    <li onclick="layui.design_table.ChangeType(3)">TAB菜单</li>
                    <li onclick="layui.design_table.ChangeType(4)">左侧筛选</li>
                </ul>
                <div class="layui-tab-content" style="padding: 10px">
                    <div class="layui-tab-item layui-show table_view_1">
                        <blockquote class="layui-elem-quote tips_legend layui-col-xs12">
                            显示配置：可配置显示模板和显示规则
                        </blockquote>
                        <textarea name="table_cols" id="focus_view_1" lay-tag="jsontable" style="display: none"></textarea>
                        <table id="table_view_1" lay-filter="table_view_1"></table>
                    </div>
                    <div class="layui-tab-item table_view_2">
                        <blockquote class="layui-elem-quote tips_legend layui-col-xs12 display_flex">
                            <div>列表访问路径：/{{= d.detail.app_num}}/{{= d.detail.mode_num}}/index/</div>
                            <div style="padding-left: 15px;padding-right: 15px">列表授权标识：{{= d.detail.app_num}}:{{= d.detail.mode_num}}:index</div>

                            {{#  if(d.detail.menu_id){ }}
                            <div class="pear-btn pear-btn-smm btn_theme_0" onclick="layui.public.OpenWindow('/admin/menu/edit/?elem=table_view_2&id={{d.detail.menu_id}}','修改',700);">已同步</div>
                            {{#  } else { }}
                            <div class="pear-btn pear-btn-smm btn_theme_1" onclick="layui.public.OpenWindow('/admin/menu/add/?elem=table_view_2&type=2&title={{d.title}}&href=/{{= d.detail.app_num}}/{{= d.detail.mode_num}}/index/&power_node={{= d.detail.app_num}}:{{= d.detail.mode_num}}:index','新增',700);">同步列表到菜单</div>
                            {{#  } }}
                            </blockquote>
                        <textarea name="table_button" id="focus_view_2" lay-tag="jsontable" style="display: none"></textarea>
                        <table id="table_view_2" lay-filter="table_view_2"></table>
                    </div>
                    <div class="layui-tab-item table_view_3">
                        <div class="layui-form layui-row layui-col-space10 form_label ruinuo_box">
                            <blockquote class="layui-elem-quote tips_legend layui-col-xs12">
                                通用权限：表示数据满足其中一项则不受权限控制，可查看所有数据<br>
                                权限字段：如不设置，则所有数据可查看，一般设置新增人字段为权限字段（create_id）
                            </blockquote>
                            <div class="layui-col-xs12">
                                <label class="layui-form-label">通用用户</label>
                                <div class="layui-input-block" data_tag="select" data_source="user_list">
                                    <div name="power_user" id="focus_power_user" type="text" lay-tag="select"></div>
                                </div>
                            </div>
                            <div class="layui-col-xs12">
                                <label class="layui-form-label">通用角色</label>
                                <div class="layui-input-block" data_tag="select" data_source="role_list">
                                        <div name="power_role" id="focus_power_role" type="text" lay-tag="select"></div>
                                </div>
                            </div>
                            <div class="layui-col-xs12">
                                <label class="layui-form-label">通用部门</label>
                                <div class="layui-input-block" data_tag="select" data_source="department_list">
                                    <div name="power_department" id="focus_power_department" type="text" lay-tag="select"></div>
                                </div>
                            </div>
                            <div class="layui-col-xs12">
                                <textarea name="table_power" id="focus_view_3" lay-tag="jsontable" style="display: none"></textarea>
                                <table id="table_view_3" lay-filter="table_view_3"></table>
                            </div>
                        </div>

                    </div>
                    <div class="layui-tab-item table_view_4">
                        <blockquote class="layui-elem-quote tips_legend layui-col-xs12">
                            作用：用于数据分栏切换，或者用于字段属性显示规则<br>
                            规则：填写正确的where语句，为空时填写1=1
                        </blockquote>
                        <textarea name="table_tab" id="focus_view_4" lay-tag="jsontable" style="display: none"></textarea>
                        <table id="table_view_4" lay-filter="table_view_4"></table>
                    </div>
                    <div class="layui-tab-item">
                        <div class="layui-form layui-row layui-col-space10 form_label ruinuo_box">

                            <div class="layui-col-xs12">
                                <label class="layui-form-label">开启左侧</label>
                                <div class="layui-input-block " data_tag="select" data_source="yesno">
                                    <select name="is_left" lay-filter="d_select_filter" lay-search="">
                                        <option value="">请选择</option>
                                        {{- layui.engine_form.SelectOption(d.source.yesno.rows,d.detail.is_left)}}
                                    </select>
                                </div>
                            </div>

                            <div class="layui-col-xs12">
                                <label class="layui-form-label">左侧标题</label>
                                <div class="layui-input-block " data_tag="input" data_source="">
                                    <input  name="left_title"  type="text" lay-tag="input" autocomplete="off"  value="{{= d.detail.left_title}}" class="layui-input">
                                </div>
                            </div>

                            <div class="layui-col-xs12">
                                <label class="layui-form-label">关联方式</label>
                                <div class="layui-input-block " data_tag="select" data_source="left_type">
                                    <select name="left_type" lay-filter="d_select_filter" lay-search="">
                                        <option value="">请选择</option>
                                        {{- layui.engine_form.SelectOption(d.source.left_type.rows,d.detail.left_type)}}
                                    </select>
                                </div>
                            </div>

                            <div class="layui-col-xs12 left_options_box" style="display: none">
                                <label class="layui-form-label">关联数据源</label>
                                <div class="layui-input-block " data_tag="select" data_source="select">
                                    <select name="left_options" lay-filter="select_filter" lay-search="">
                                        <option value="">请选择</option>
                                        {{- layui.engine_form.SelectOption(d.source.select.rows,d.detail.left_options)}}
                                    </select>
                                </div>
                            </div>

                            <div class="layui-col-xs12 left_mode_box" style="display: none">
                                <label class="layui-form-label">关联模块</label>
                                <div class="layui-input-block " data_tag="select" data_source="mode_list">
                                    <select name="left_mode" lay-filter="select_filter" lay-search="">
                                        <option value="">请选择</option>
                                        {{- layui.engine_form.SelectOption(d.source.mode_list.rows,d.detail.left_mode)}}
                                    </select>
                                </div>
                            </div>

                            <div class="layui-col-xs12">
                                <label class="layui-form-label">主键字段</label>
                                <div class="layui-input-block " data_tag="input" data_source="">
                                    <input  name="left_key_field" type="text" lay-tag="input" autocomplete="off"  value="{{= d.detail.left_key_field}}" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-col-xs12">
                                <label class="layui-form-label">显示字段</label>
                                <div class="layui-input-block " data_tag="input" data_source="">
                                    <input  name="left_show_field" type="text" lay-tag="input" autocomplete="off"  value="{{= d.detail.left_show_field}}" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-col-xs12">
                                <label class="layui-form-label">关联字段</label>
                                <div class="layui-input-block " data_tag="input" data_source="">
                                    <input  name="left_field" type="text" lay-tag="input" autocomplete="off"  value="{{= d.detail.left_field}}" class="layui-input">
                                </div>
                            </div>








                        </div>
                    </div>

                </div>
            </div>
        </section>
        {{# } else { }}
        <div class="nodata" onclick="layui.public.DrawerTpl('.mode_list','300px','模块类别')" >
            <i class="ruinuo-icon icon-meiyoushuju"></i>
            请先选择模块
        </div>
        {{# } }}
    </div>

</script>
<div style="display: none" class="view_mode_list"></div>
<script type="text/html" id="view_mode_list_data">
    <div class="mode_list">
        <div class="layui-card-body">
            <div class="layui-menu">
                <div class="inputdiv">
                    <i class="layui-icon layui-icon-search"></i>
                    <input type="text" autocomplete="off" class="layui-input ruinuo_drawer_search"
                           placeholder="输入关键词检索">
                </div>
                {{# layui.each(d.modelist, function(index, item){ }}
                <li lay-options="{type: 'group'}" class="layui-menu-item-group layui-menu-item-up">
                    <div class="layui-menu-body-title" style="font-weight: bold;color:#000;">
                        {{item.name}}<i class="layui-icon layui-icon-down"></i>
                    </div>
                    <ul>
                        {{# layui.each(item.children, function(iindex, iitem){ }}
                        <li data-id="{{iitem.id}}" data-mode="table" onclick="layui.public.DrawerClick(this);">
                            <div class="layui-menu-body-title">{{iitem.name}}</div>
                        </li>
                        {{# }); }}
                    </ul>
                </li>
                {{# }); }}
            </div>
        </div>
    </div>
</script>
<!--S选择字段-->

<div style="display:none;">
    <div class="field-layer-right">
        <div class="layui-card-header">选择字段<i class="layui-icon layui-icon-close fieldbtnClose"
                                              style="float:right; cursor:pointer" title="关闭"></i></div>
        <div class="layui-card-body layui-form" style="overflow-y:auto; height:92vh">
            <table class="layui-table layui-table-filed" lay-skin="line" style="border-width:0px; margin-top:0px">
                <thead>
                <tr>
                    <th align="left">选择</th>
                    <th align="left">字段编码</th>
                    <th align="left">字段名称</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td align="center"></td>
                    <td align="center"></td>
                    <td align="center"></td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<!--E选择字段-->

<script>
    var $ = layui.jquery;
    var config = [];
    let SettingData = {};
    let SeleteData = {};
    let raw = '';
    let current  = 1;
    let InitData={};
    layui.use(['design_table', 'form', 'http', 'public'], function () {
        layui.design_table.Init();
    })

    function SelectAction(res = [], field = '') {
        if (field == "field") {
            var text = res.arr[0].text || '';
            $(".design-right-con input[name='title']").val(text);
        }
        setTimeout("layui.design_form.UpJson()", 100);
    }

    function CheckboxAction() {
        layui.form.on('checkbox(checkbox_filter)', function (data) {
            layui.design_form.UpJson();
        })
    }

    function RadioAction() {
        layui.form.on('radio(radio_filter)', function (data) {
            layui.design_form.UpJson();
        })
    }

    function SwitchAction() {
        layui.form.on('switch(SwitchField)', function (data) {
            layui.design_form.UpJson();
        })
    }

    function TableAction(id = '') {
        layui.design_form.UpJson();
    }

    function SearchLoad(elem = '', type = '') {
        layui.design_table.Init();
    }

    function FileCode() {
        let GetConfig = layui.design_table.GetConfig();
        let modeid = GetConfig.modeid || 0;
        if (modeid == 0) {
            layer.msg('请先选择模块', {icon: 2});
            layui.public.DrawerTpl('.mode_list', '300px', '模块类别');
            return false;
        }
        layui.http.SendAjax('/ruinuo/mode/filecode/', {id: modeid}, [], function (res) {
            if (res.code == 200) {
                layer.msg('生成成功', {icon: 1});
            } else {
                layer.msg(res.msg, {icon: 2});
            }
        })
    }
</script>
</body>
</html>
